<template>
  <div id="app">
    <bfLogin v-if="!isLogin"/>
    <el-container v-else class="bf-body">
      <el-header>Header</el-header>
      <el-container>
        <el-aside class="bf-nav-wrap">
          <bfNav @collapse="navCollapse"
                 @activeIndex="activeIndex"></bfNav>
        </el-aside>
        <el-container class="bf-main-wrap">
          <el-aside :class="['bf-aside-wrap',bfcollapse]">
            <!--<bfAside></bfAside>-->
            <fancytree tid="ftid" @load="load"></fancytree>
          </el-aside>
          <div class="bf-aside-ctrol-wrap">
            <el-button :class="['bf-icon bf-aside-ctrol',bfcollapseCtrol]"
                       size="mini"
                       type="text"
                       @click="asideCollapse=!asideCollapse"></el-button>
          </div>
          <el-main class="bf-main-body">
            <component :is="componentName"
                       v-show="componentName"
                       keep-alive/>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
  import {Vue, Component, Watch} from 'vue-property-decorator'
  import {State} from 'vuex-class'
  import "./iconfonts/iconfont.css";

  @Component({
    components: {
      bfLogin: () => import(/* webpackChunkName: "bfLogin" */ './components/bfLogin.vue'),
      bfNav: () => import(/* webpackChunkName: "bfNav" */ './components/bfNav.vue'),
      bfAside: () => import(/* webpackChunkName: "bfAside" */ './components/bfAside.vue'),
      dataTable: () => import(/* webpackChunkName: "dataTable" */ './components/tpl/dataTable.vue'),
      fancytree: () => import(/* webpackChunkName: "fancytree" */ './components/tpl/fancytree.vue'),
      test: () => import(/* webpackChunkName: "test" */ './components/test.vue'),
      bfTable: () => import(/* webpackChunkName: "bfTable" */ './components/bfTable.vue'),
    }
  })
  export default class App extends Vue {
    @State isLogin;

    asideCollapse: boolean = false;
    componentName: string = "test";

    load() {
      console.log('fancytree loaded')
    }

    activeIndex(key: string, keyPath: string) {
      switch (key) {
        case "test":
        case "bfTable":
          this.componentName = key;
          break;
      }
    }

    navCollapse(bool) {
      this.reCalcTableHeadWidth();
    }

    reCalcTableHeadWidth() {
      setTimeout(() => {
        let $fn: any = $.fn;
        $fn.DataTable.tables({visible: true, api: true}).columns.adjust();
      }, 350);
    }

    get bfcollapse() {
      return this.asideCollapse ? "bf-collapse-leave" : "bf-collapse";
    }

    get bfcollapseCtrol() {
      return this.asideCollapse ? 'gw-collapseright bf-aside-ctrol-collapse' : 'gw-collapseleft';
    }

    @Watch('asideCollapse')
    w_asideCollapse(val) {
      this.reCalcTableHeadWidth();
    }
  }

</script>

<style lang="scss">
  @import "./scss/app";
  @import "./scss/glob";

  .el-header {
    background-color: #373d41;
    color: #fff;
    text-align: center;
    line-height: 50px;
    height: 50px !important;
  }

  .el-aside {
    background-color: #333744;
    color: #fff;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
  }

  .el-container {
    @include full
  }

  .bf-nav-wrap {
    width: unset !important;
    overflow: hidden;
  }

  .bf-aside-ctrol-wrap {
    position: relative;
    flex: auto;
    flex-grow: unset;

    .bf-aside-ctrol {
      position: absolute;
      left: -18px;
      top: 50%;
      transform: translateY(-50%);
      padding: 16px 3px;
      border-radius: 10px 0 0 10px;
      color: #fff;
    }
    .bf-aside-ctrol-collapse {
      left: 0;
      border-radius: 0 10px 10px 0;
    }

    .bf-aside-ctrol, .bf-aside-ctrol:hover, .bf-aside-ctrol:active, .bf-aside-ctrol:focus {
      @include noborder;
      background: #909399;
    }

  }

  .bf-main-wrap {

    .bfcollapse-enter-active, .bfcollapse-leave-active {
      transition: width .25s;
    }

    .bf-aside-wrap {
      width: 260px !important;
      background: #bec1c9;
      transition: width 0.3s ease-in-out;
      overflow: hidden;
    }
    .bf-collapse {

    }
    .bf-collapse-leave {
      width: 0 !important;
    }

    .bf-main-body {

    }

  }

  body, h3 {
    margin: 0;
    padding: 0;
  }

  body {
    overflow: hidden;
  }

  .el-dialog__wrapper.bf-drag {
    position: unset !important;
    top: unset !important;;
    right: unset !important;;
    bottom: unset !important;;
    left: unset !important;;
    overflow: unset !important;;
    margin: unset !important;;
    z-index: unset !important;
    height: 0;
  }

  .el-dialog__wrapper.bf-resizing {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    height: 100%;
  }

  .bf-resize .el-dialog {
    margin-bottom: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .bf-resize .el-dialog__header, .bf-resize .el-dialog__body, .bf-resize .el-dialog__footer {
    flex: auto;
  }

  .bf-resize .el-dialog__header, .bf-resize .el-dialog__footer {
    flex-grow: 0;
  }

  .bf-resize .el-dialog__body {
    overflow-y: auto;
  }

  .ui-resizable-handle {
    z-index: 90;
  }

</style>
